<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogFormId ? '编辑公告' : '新增公告'"
    width="800px"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="onCancel"
    align-centerwidth="800px"
    @close="close"
  >
    <template #default>
      <el-form :model="noticeForm" label-width="50px" class="user-editor-form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="noticeForm.title" show-word-limit placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型" prop="type" class="inline">
          <el-select v-model="noticeForm.type" placeholder="请选择类型">
            <el-option
              v-for="item in dicts.system_notice_type"
              :key="item.v"
              :label="item.k"
              :value="noticeForm.type == item.v ? noticeForm.type : item.v"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="enabled" class="inline">
          <el-select v-model="noticeForm.enabled" placeholder="请选择状态">
            <el-option
              v-for="item in dicts.system_global_status"
              :key="item.v"
              :label="item.k"
              :value="noticeForm.enabled == item.v ? noticeForm.enabled : item.v"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <TextEditor v-model:content="noticeForm.content" />
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs
} from 'vue'

import { noticeAdd, noticeGet, noticeUpdate } from '@api/notice'
import { INoticeFormAdd } from '@interface/notice'
import { ElMessage } from 'element-plus'
import TextEditor from '../../../components/TextEditor/index.vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  noticeUpdateId: {
    type: String,
    default: ''
  }
})

const noticeForm = reactive<INoticeFormAdd>({
  title: '',
  type: 1,
  enabled: 1,
  content: ''
})

const dialogVisible = ref(props.dialogVisible)
const noticeUpdateId = ref(props.noticeUpdateId)

onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_notice_type', 'system_global_status'])
  }
})

onBeforeMount(() => {
  noticeGetInfo(noticeUpdateId.value)
})

const onSubmit = async () => {
  if (noticeUpdateId.value != '') {
    await updateNotice()
  } else {
    await addNotice()
  }
  emit('noticeChange')
  close()
}
const addNotice = async () => {
  const res = await noticeAdd(noticeForm)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}
//详情
const noticeGetInfo = async (id: string) => {
  const res = await noticeGet(id)
  Object.assign(noticeForm, res.data)
}

const updateNotice = async () => {
  const res = await noticeUpdate(noticeForm)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}

//关闭dialog
// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits()
const close = () => {
  emit('update:dialogVisible', false)
  emit('userChange')
}
</script>
<style lang="scss" scoped>
.user-editor-form {
  :deep(.inline) {
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
  }

  .treeList {
    padding: 2px;
    width: 100%;
  }
}
.inline {
  display: inline-flex;
  vertical-align: middle;
  width: 50%;
}

::v-deep .ql-container {
  width: 100%;
  height: 30vh;
  overflow: auto;
}
</style>
